/*
 * @Description: 返回列表
 * @Author: ZzT
 * @Date: 2023-03-03 15:29:59
 * @LastEditTime: 2023-03-10 16:38:30
 */
import { fetchDetail } from '@/api/archives/archives';
import { submitAudioTextSearch, submitImageSearch } from '@/api/search';
import { IPageQuery } from '@/interfaces/global';
import { byteConvert } from '@/utils';
import { Image, Button, List, Tag } from 'antd';
import classNames from 'classnames/bind';
import dayjs from 'dayjs';
import { useEffect, useMemo, useState } from 'react';
import styles from '../styles/searchResult.module.scss';
import Information from './Information';

const cx = classNames.bind(styles);

const ResultList = (props: any) => {
  const { routeState } = props;
  const { data } = routeState;
  const { params, type } = routeState;
  const { results } = data;
  console.log('results', data);
  const [messData, setMessData] = useState(results);

  const [messageData, setMessageData] = useState({});
  const [messageVisible, setMessageVisible] = useState(false);

  // 表格加载
  const [loading, setLoading] = useState(false);
  // 总条目数
  const [total, setTotal] = useState(data.totalCount);
  // 表格请求参数
  const [listQuery, setListQuery] = useState<IPageQuery>({
    ...params
  });

  /**
   * @description 切换页码触发
   * @param {number} page 页码
   * @param {number} pageSize 每页条目数
   */
  const pageChange = (page: number, pageSize: number) => {
    setListQuery((state) => ({
      ...state,
      pageNo: page,
      pageSize
    }));
  };
  useEffect(() => {
    if (listQuery.pageNo === 0) return;
    setLoading(true);
    if (listQuery) {
      setTotal(0);

      type === 4
        ? submitImageSearch(listQuery)
            .then((res: any) => {
              const { data } = res;
              setMessData(data.results);
              setTotal(res?.totalCount);
            })
            .finally(() => {
              setLoading(false);
            })
        : submitAudioTextSearch(listQuery)
            .then((res: any) => {
              const { data } = res;
              setMessData(data.results);
              setTotal(res?.totalCount);
            })
            .finally(() => {
              setLoading(false);
            });
    }
  }, [listQuery]);

  const showMessage = (val: any) => {
    const param = {
      archiveTypeId: val.context.archiveTypeId,
      dbName: val.context.dbName,
      entryId: val.id
    };
    fetchDetail(param)
      .then((res: any) => {
        const { data } = res;
        /* 查找接口 */
        setMessageData(data);
      })
      .finally(() => setMessageVisible(true));
  };

  return (
    <div className={cx('list')}>
      <List
        itemLayout="vertical"
        size="default"
        loading={loading}
        pagination={{
          current: listQuery.pageNo,
          pageSize: listQuery.pageSize,
          total,
          onChange: pageChange
        }}
        dataSource={messData}
        renderItem={(item: any) => (
          <List.Item
            key={item.title}
            extra={<Button onClick={() => showMessage(item)}>查看文件信息</Button>}
          >
            <List.Item.Meta
              avatar={
                <div className={cx('img')}>
                  <Image rootClassName={cx('imageDown')} src={item.imgUrl || item.url} />
                </div>
              }
              title={<div>文件名称：{item.imgName || item.name}</div>}
              description={
                type === 4 ? (
                  <div>
                    <div className={cx('type-size')}>
                      <div>格式：{item.imgType}</div>
                      <div>大小：{byteConvert(item.size)}</div>
                    </div>
                    <Tag color={parseInt(item.score, 10) > 80 ? 'green' : 'orange'}>
                      相似度：{item.score}
                    </Tag>
                  </div>
                ) : (
                  <div>
                    <div>
                      时间点：
                      <Tag color={'#666666'}>
                        {dayjs(0).second(item.timeline).minute() &&
                          `${dayjs(0).second(item.timeline).minute()}分`}
                        {dayjs(0).second(item.timeline).second()}秒
                      </Tag>
                    </div>
                    <div>锚点描述：{item.description}</div>
                  </div>
                )
              }
            />
          </List.Item>
        )}
      />
      {useMemo(
        () =>
          messageVisible && (
            <Information
              onClose={() => setMessageVisible(false)}
              visible={messageVisible}
              data={messageData}
            />
          ),
        [messageData, messageVisible]
      )}
    </div>
  );
};
export default ResultList;
